<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    {{message}}
    <h2>父组件num0-->{{num0}}</h2>
    <h2>父组件num1-->{{num1}}</h2>
    <hr>
    <cpn :number0="num0" :number1="num1" @num0-innputed="cpnNum0Inputed" @num1-innputed="cpnNum1Inputed"/>

    <hr>
    <h2>父组件num0-->{{num0}}</h2>
    <h2>父组件num1-->{{num1}}</h2>

</div>


<template id='cpn'>
    <div>
        <h2>子组件props-number0-->{{number0}}</h2>
        <h2>子组件data-dnum0-->{{dnum0}}</h2>
        <!--<input type="text" v-model="dnum0">-->
        <input type="text" :value="dnum0" @input="inputNum0">
        <h2>子组件props-number1-->{{number1}}</h2>
        <h2>子组件data-dnum1-->{{dnum1}}</h2>
        <!--<input type="text" v-model="dnum1">-->
        <input type="text" :value="dnum1" @input="inputNum1">
    </div>
</template>
<script src="../../js/vue.js"></script>

<script>

    const cpn = {
        template: '#cpn',
        props: {
            number0: Number,
            number1: Number
        },
        data(){
            return{
                dnum0: this.number0,
                dnum1: this.number1
            }
        },
        methods:{
            inputNum0(event){
                this.dnum0 = event.target.value;
                this.$emit('num0-innputed', parseInt(this.dnum0)*2)
            },
            inputNum1(event){
                this.dnum1 = event.target.value;
                this.$emit('num1-innputed', parseInt(this.dnum1)/2)
            }
        }
    }

    const vue = new Vue({
        el: "#app",
        data: {
            message: "Hello vue,你好！",
            num0: 0,
            num1: 1
        },
        components:{
            cpn
        },
        methods: {
            cpnNum0Inputed(value){
                this.num0 = parseInt(value);
            },
            cpnNum1Inputed(value){
                this.num1 = parseInt(value);
            }
        }
    });
</script>


</body>
</html>